import { SearchBar, Swiper, Image } from "antd-mobile";
import swiper1 from "@/assets/images/swiper1.jpg";
import swiper2 from "@/assets/images/swiper2.jpg";
import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async";
import { GoodsList } from "./components/GoodsList";
import { useCallback, useEffect, useState } from "react";
import { productList } from "@/api/product";
import type { Product } from "./package1/GoodsDetail";
const swipers = [
  { image: swiper1, name: "sw1", id: 1 },
  { image: swiper2, name: "sw2", id: 2 },
];

const items = swipers.map((sw) => {
  return (
    <Swiper.Item key={sw.id}>
      <Image src={sw.image}></Image>
    </Swiper.Item>
  );
});

export default function Home() {
  const navigate = useNavigate();

  const [products, setProducts] = useState<Product[]>([]);

  const clickProduct = useCallback(
    (item: Record<string, any>) => {
      const { keyword } = item;
      navigate("/goodsDetail?keyword=" + keyword);
    },
    [navigate]
  );

  useEffect(() => {
    productList().then((res) => {
      setProducts(res.data);
    });
  }, []);

  return (
    <div className="">
      <Helmet>
        <title>首页</title>
      </Helmet>
      <div className="p-4 bg-gradient-to-b from-orange-400 to-orange-50">
        <SearchBar
          placeholder="请输入内容"
          onFocus={() => navigate("/search")}
        />
        {/* 轮播图 */}
        <div className="rounded-lg overflow-hidden mt-3">
          <Swiper autoplay loop>
            {items}
          </Swiper>
        </div>
      </div>
      {/* 商品列表 */}
      <GoodsList products={products} onClick={clickProduct}></GoodsList>
    </div>
  );
}
